<template>
  <div>
    <Calendar
      class="calendar111"
      ref="Calendar"
      :markDateMore="arr"
      :markDate="arr2"
      v-on:isToday="clickToday"
      agoDayHide="1530115221"
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
    ></Calendar>
    <van-cell-group :title="dateNow">
      <van-cell v-for="item in items" :key="item.time" :title="item.content" :value="item.time" />
    </van-cell-group>
    <div v-if="len==0">
      <van-empty description="暂无日程" />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import { Cell, CellGroup } from "vant";
import { Empty } from "vant";

Vue.use(Empty);
Vue.use(Cell);
Vue.use(CellGroup);
import Calendar from "vue-calendar-component";
export default {
  data() {
    return {
      // arr2: ['2018/6/23'],
      arr2: [],
      arr: [],
      dateNow: "今日日程",
      onDate: "",
      items: [],
      len:0,
    };
  },
  components: {
    Calendar
  },
  methods: {
    async clickDay(data) {
      this.dateNow = this.timeFormat(data) + "日程";
      this.onDate = data;
      await this.getDate(this.timeFormat(this.onDate));
      if (this.timeFormat(this.onDate) != this.timeFormat(new Date())) {
        this.arr.push({
          date: this.timeFormat(new Date()),
          className: "inActiveStyle"
        });
      } else {
        this.arr.push({
          date: this.timeFormat(new Date()),
          className: "bodyStyle"
        });
        this.dateNow = '今日日程'
      }
    },
    clickToday(data) {
    //   console.log("跳到了本月今天", data); //跳到了本月
    },
    changeDate(data) {
    //   console.log("左右点击切换月份", data); //左右点击切换月份
    },
    async getDate(onDate) {
      const { data: res } = await this.$http.get("/api/find/allRemindDate", {
        params: { uid: sessionStorage.getItem('uid'), date: onDate }
      });
      this.items = res.data;
      this.len = this.items.length;
    },
    timeFormat(date) {
      let date1 = new Date(date);
      return moment(date).format("YYYY-MM-DD");
    }
  },
  created() {
    function format(date) {
      date = new Date(date);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    }
    this.arr.push({
      date: format(new Date()),
      className: "bodyStyle"
    });
    this.onDate = this.timeFormat(new Date());
    this.getDate(this.onDate);
    sessionStorage.setItem('uid',this.$route.query.uid)
  }
};
</script>

<!-- Add "scoped " attribute to limit CSS to this component only -->
<style>
h3 {
  text-align: center;
  width: 90%;
  margin: auto;
}
.div {
  margin: auto;
  width: 220px;
  height: 44px;
  line-height: 44px;
  background: #fff;
  color: #4298b5;
  font-size: 17px;
  text-align: center;
  margin-top: 20px;
}
.wh_container >>> .mark1 {
  background-color: #008000;
}
.wh_container >>> .mark2 {
  background-color: blue;
}
.wh_content_item > .wh_isMark {
  background: #008000;
}
div >>> .wh_isToday {
  background-color: #008000 !important;
}
.wh_container >>> .wh_content_all {
  /* background-color: #fff !important; */
  /* color: #4298b5 !important; */
}
.bodyStyle {
  background-color: #008000 !important;
  border-radius: 100px;
}
.inActiveStyle {
  background-color: #0fc37c !important;
  border-radius: 100px;
}
.wh_content_all {
}
</style>